<template>
    <!-- <div>
      <el-card shadow="never">
        <template #header>
          <div class="header">
            <span>设备使用信息（示例 / Vue3 + Element Plus）</span>
            <div class="actions">
              <el-button size="small" @click="reload">刷新模拟数据</el-button>
            </div>
          </div>
        </template>
  
        <EquipmentUsageList :items="items" />
        
      </el-card>
    </div> -->

    <EquipmentUsageList :items="list" height="66vh" :padding="2"/>
  </template>
  
  <script setup>
import { ref, watch } from 'vue'
import EquipmentUsageList from './EquipmentUsageList.vue'
import { getDeptUsage } from '@/api/sbtz/sbtz'

/** 父可能会传当前资产行（row）或者直接传 items */
const props = defineProps({
  row:   { type: Object, default: () => ({}) },
  items: { type: Array,  default: () => [] }
})

const list = ref([])        // 一定保证是数组
const loading = ref(false)
let token = 0               // 防竞态

/** 把后端 AssetNodeUsage → 表格行 */
function adaptUsage(r = {}) {
  return {
    // 表格行的稳定 key
    id: `${r.assetId ?? ''}-${r.deptId ?? ''}-${r.startTs ?? ''}`,

    // 资产名称：优先用父级 row.name；没有就兜底
    assetName: props.row?.name ?? `资产#${r.assetId ?? ''}`,

    // “启用时间”列这边目前没有资产启用时间字段，就用父 row.createTime 做演示；有真实字段可替换
    enabledAt: r.startTs ?? null,

    // 部门名
    department: r.deptName ?? (r.deptId ?? '-'),

    // 使用时间段
    useRange: (r.startTs || r.endTs) ? { start: r.startTs, end: r.endTs } : null,

    // 目前没有闲置时间段字段，先置空
    idleRange: (r.startTs || r.endTs) ? { start: r.startTs, end: r.endTs } : null,

    // 停用时间：等同 endTs（如果有）
    stopAt: (r.startTs || r.endTs) ? { start: r.startTs, end: r.endTs } : null,

    status: r.status,
    // 表格“状态”列：根据 endTs/openFlag 粗略映射
    now_status: (r.openFlag === 1 || r.endTs == null) ? 1 : 0,
    
  }
}

/** 把各种响应形态统一抽出数组 */
function pickRows(res) {
  if (Array.isArray(res?.rows)) return res.rows
  if (Array.isArray(res?.data?.rows)) return res.data.rows
  if (Array.isArray(res?.data)) return res.data
  if (Array.isArray(res)) return res
  return []
}

/** 优先用父 props.items；否则根据 row.id 拉接口并适配到表格数据 */
watch(
  () => [props.items, props.row?.id],
  async () => {
    // 1) 父组件已直接传 items
    if (Array.isArray(props.items) && props.items.length) {
      list.value = props.items.map(adaptUsage)
      return
    }

    // 2) 根据 row.id 拉
    const id = props.row?.id
    if (!id) { list.value = []; return }

    const my = ++token
    loading.value = true
    try {
      const res  = await getDeptUsage(id)   // 这里务必 await
      const rows = pickRows(res)            // 一定是数组
      console.log(res);
      list.value = rows.map(adaptUsage)     // 做字段映射 → 子表格就能吃
    } catch (e) {
      console.error('[getDeptUsage] failed:', e)
      list.value = []
    } finally {
      if (my === token) loading.value = false
    }
  },
  { immediate: true }
)
</script>
  
  <style scoped>
   
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  </style>
  